<template>
  <div class="ratings" ref="ratings">
       <div id="ratings-content">
       	   <!--星级评价-->
       		<div class="overview">
       			<div class="overview-left border-right">
       				<h1 class="score">{{seller.score}}</h1>
       				<div class="title">综合评分</div>
       				<div class="rank">高于周边商家{{seller.rankRate}}</div>
       			</div>
       			<div class="overview-right">
       				<div class="score-wrapper">
       					   <span class="title">服务态度</span>
       					   <star :size="36" :score="seller.serviceScore"></star>
       					   <span class="score">{{seller.serviceScore}}</span>
       				</div>
       				<div class="score-wrapper">
       					  <span class="title">商品评分</span>
       					  <star :size="36" :score="seller.foodScore"></star>
       					  <span class="score">{{seller.foodScore}}</span>
       				</div>
       				<div class="delicery-wrapper">
       					<span class="title">送达时间</span>
       					<span class="delicery">{{seller.deliveryTime}}分钟</span>
       				</div>
       			</div>
       		</div>
          <!--线条和全部-->
          <split></split>
          <ratingselect 
					:select-type="selectType" 
					:only-content="onlyContent"  
					:ratings="ratings"
					@select="select" 
					@toggle="toggle">
					</ratingselect>
          <!--列表-->
          <div class="rating-wrapper ">
          	<ul>
          		 <li v-for="rating in ratings"  v-show="needShow(rating.rateType, rating.text)" class="rating-item border-bottom">
          		 		 <div class="avatar">
          		 		 	<img :src="rating.avatar" alt=""  width="28" height="28"/>
          		 		 </div>
          		 		 <div class="content">
          		 		 	<h1 class="name">{{rating.username}}</h1>
          		 		 	<div class="star-wrapper">
          		 		 		<star :size="24" :score="rating.score"></star>
          		 		 		<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
          		 		 	</div>
          		 		 	<p class="text">{{rating.text}}</p>
          		 		 	<div class="recommend" v-show="rating.recommend&&rating">
          		 		 		  <span class="icon-thumb_up"></span>
          		 		 		  <span class="item"  v-for="(item,index)  in rating.recommend" :key="index">{{item}}</span>
          		 		 	</div>
          		 		 	<div class="time">{{rating.rateTime | formatDate}}</div>
          		 		 	
          		 		 </div>
          		 </li>
          	</ul>
          </div>
       </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import axios from 'axios'
import star from '@/components/star/star';
import  {formatDate} from '@/common/js/date.js'
import split from '@/components/split/split'
import ratingselect from '@/components/ratingselect/ratingselect'
const POSITYIVE=0;
const NEGATIVE=1;
const ALL=2;

export default {
  name: 'ratings',
  data () {
    return {
    	 ratings:[],
    	 selectType:ALL,
    	 onlyContent:true
    }
  },
  props:{
  	 seller:{
    		type:Object
    	}
  },
  created() {
  	 this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
		 this.getgoodsfo()
	 },
  methods:{
		getgoodsfo(){
			axios.get('../../static/data.json')
			.then(this.getgoods)
		},
		getgoods(res){
			res=res.data;
			if(res.ratings&&res){
				this.ratings=res.ratings;
				this.$nextTick(()=>{ //ratings 组件调用BScroll滚动条
					if(!this.scoll){
						this.scroll=new BScroll(this.$refs.ratings,{
							click:true
						});
					}else{
						this.scroll.refresh() 
					}
				})
		   }
		 },
		   needShow(type, text) {
        if (this.onlyContent && !text) {
          return false;
        }
        if (this.selectType === ALL) {
          return true;
        } else {
          return type === this.selectType;
        }
      }
			,
			select(type){
				this.selectType = type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			toggle(type){
				this.onlyContent = type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			}
		},
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
   components:{
    star,
    split,
    ratingselect
   },
  watch:{
   	'ratings'(to,form){
// 		console.log(this.ratings)
   	}
   }
   }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
	@import "../../common/stylus/border.css";
	@import "../../common/stylus/url.less";
	@import "../../common/stylus/icon.less";
			.ratings{
				 position: absolute;
				 top: 174px;
				 bottom: 0;
				 left: 0;
				 width: 100%;
				 overflow: hidden;
				 .overview{
				 	display: flex;
				 	padding: 18px 0;
				 	.overview-left{
				 		flex: 0 0 130px;
				 		width: 130px;
				 		border-right:rgba(7,17,27,0.1);
				 		text-align: center;
				 		padding: 6px 0;
				 		@media  screen and (max-width:320){
				 			flex: 0 0 120px;
				 			width: 120px;
				 		}
				 		.score{
				 			line-height: 28px;
				 			font-size: 24px;
				 			color: rgb(255,153,0);
				 			margin-bottom: 6px;
				 		}
				 		.title{
				 			font-size: 12px;
				 			line-height: 12px;
				 			color: rgb(7,17,27);
				 			margin-bottom: 8px;
				 		}
				 		.rank{
				 			line-height: 10px;
				 			font-size: 10px;
				 			color: rgb(147,153,159);
				 		}
				 	}
				 	.overview-right{
				 		flex: 1;
				 		padding: 6px 0 6px 24px;
				 		@media  screen and (max-width:320){
				 			padding: 0;
				 		}
				 		.score-wrapper{
				 			font-size: 0;
				 			margin-bottom: 8px;
				 			.title{
				 				display: inline-block;
				 				vertical-align: top;
				 				font-size: 12px;
				 				line-height: 18px;
				 				color: rgb(7,17,27);
				 			}
				 			.star{
				 				display: inline-block;
				 				vertical-align: top;
				 				margin: 0 12px;
				 			}
				 			.score{
				 				display: inline-block;
				 				vertical-align: top;
				 				line-height: 18px;
				 				font-size: 12px;
				 				color: rgb(255,153,0);
				 			}
				 		}
				 		.delicery-wrapper{
				 			font-size: 0;
				 			.title{
				 				display: inline-block;
				 				vertical-align: top;
				 				font-size: 12px;
				 				line-height: 18px;
				 				color: rgb(7,17,27);
				 			}
				 			.delicery{
								display: inline-block;
								vertical-align: top;
								line-height: 18px;
				 				font-size: 12px;
								margin-left: 12px;
				 				color: rgb(147,153,159);
				 			}
				 		}
				 	}
				 	
				 }
				 .rating-wrapper{
				 	 padding: 0 18px;
				 	 .rating-item{
				 	 	display: flex;
				 	 	padding: 18px 0;
				 	 	&.border-bottom{
				 	 		border-bottom:1px solid rgba(7,17,27,0.1);
				 	 	}
				 	 	.avatar{
				 	 		flex: 0 0 28px;
				 	 		width: 28px;
				 	 		margin-right: 12px;
				 	 		img{
				 	 			border-radius:50% ;
				 	 		}
				 	 	}
				 	 	.content{
				 	 		position: relative;
				 	 		flex: 1;
				 	 		.name{
				 	 			line-height: 12px;
				 	 			font-size: 10px;
				 	 			color:rgb(7,17,27);
				 	 			margin-bottom: 4px;
				 	 		}
				 	 		.star-wrapper{
				 	 			margin-bottom: 6px;
				 	 			font-size: 0;
				 	 			.star{
				 	 				display: inline-block;
				 	 				vertical-align: top;
				 	 				margin-right: 6px;
				 	 			}
				 	 			.delivery{
				 	 				display: inline-block;
				 	 				vertical-align: top;
				 	 				line-height: 12px;
				 	 			  font-size: 10px;
				 	 			  color:rgb(147,153,159);
				 	 			}
				 	 		}
				 	 		
				 	 	}
				 	 	
				 	 }
				 }
         .text{
         	  margin-bottom: 8px;
         	  line-height: 18px;
         	  color:rgb(7,17,27);
         	  font-size:12px;
         }
         .recommend{
         	font-size: 0;
         	 line-height: 16px;
         	 .icon-thumb_up,.item{
         	 	 display: inline-block;
         	 	 margin:0 8px 4px 0;
         	 	 font-size: 9px;
         	 }
         	 .icon-thumb_up{
         	 	color: rgb(0,160,220);
         	 }
         	 .item{
         	 	 padding: 2px 6px;
         	 	 border: 1px solid rgba(7,17,27,.1);
         	 	 border-radius: 7px;
         	 	 color:rgb(147,153,159);
         	 	 background: #FFFFFF;
         	 }
         }
         .time{
         	  position: absolute;
         	  top: 0;
         	  right: 0;
         	  line-height: 12px;
         	  font-size: 10px;
         	  color:rgb(147,153,159);
         }				  
			}
			@media screen and  (max-width:320px){
				.ratings .overview	.overview-left{
				 	flex: 0 0 110px;
				 	width: 110px;
				}
				.ratings .overview .overview-right{
				 	padding: 0 0 0 6px;
				}
			}
  
  
</style>
